// import React,{useState} from 'react';
import React,{useState} from './ireact/react';
// import ReactDOM from 'react-dom';
import ReactDOM from './ireact/react-dom';


/*
hook不能放在if for里
要保证每次渲染时它在函数里所处的hook位置一样
* */
function Counter1(){
  const [number1,setNumber1] = useState(1)

  return (
    <div>
      <p>Counter1: {number1}</p>
      <button onClick={() => setNumber1(number1 + 1)}>counter1+</button>
    </div>
  );
}

function Counter2(){
  const [number2,setNumber2] = useState(2)

  return (
    <div>
      <p>Counter2: {number2}</p>
      <button onClick={() => setNumber2(number2 + 1)}>counter2+</button>
    </div>
  );
}



function App(){
  const [number, setNumber] = useState(0);

  const delayAddNumber = ()=>{
    setTimeout(() => {
      //↓取的是点的时候 number 的值, 而不是定时器时间到了 最新的值
      // setNumber(number + 1);
      //↓你想要取最新的值 需要通过函数的形式
      setNumber(number => number + 1);
    }, 3000);
  }

  return (
    <div>
      {/*{number%2===0&&<Counter1/>}*/}
      <Counter1/>
      <Counter2/>
      App count: {number}
      <button onClick={() => setNumber(number + 1)}>App+</button>
      <button onClick={delayAddNumber}>App delay+</button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
